<template>
	<view class="login-box">
		<view class="loginimg">
			<image src="../../static/otherlogin.jpg" mode="widthFix"></image>
		</view>
		<view class="login-content">
			<uv-form :model="regform" label-width="80" :borderBottom="true">
				<uv-form-item label="手机号码" required="" borderBottom>
					<uv-input placeholder="填输入" border="none" v-model="regform.phone"></uv-input>
				</uv-form-item>
				<uv-form-item label="密码" required="" borderBottom>
					<uv-input placeholder="填输入" border="none" v-model="regform.password"></uv-input>
				</uv-form-item>
				<uv-form-item>
					<uv-button :disabled="!isAgrement" shape="circle" type="primary" @click="toLogin">登录</uv-button>
				</uv-form-item>
			</uv-form>
			<view class="login-check">
				<view class="check-left"><uv-checkbox-group shape="circle">
						<uv-checkbox :customStyle="{marginBottom: '8px'}" name="checked" @change="changeBox">
							<template v-slot:default>
								<text style="color: #909399;">已阅读并同意</text>
							</template>
						</uv-checkbox>
					</uv-checkbox-group>
				</view>
				<view class="check-right">
					<text style="color: #3c9cff;" @click="tourl('/pages/auth/privacyagreement')">《隐私政策》</text>
					<text style="color: #3c9cff;" @click="tourl('/pages/auth/vipprivacy')">《会员服务协议》</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import { login } from '@/utils/http.js'
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				regform: {
					phone: '13552589429',
					password: '123456',
					fromcode: ''
				},
				isAgrement: false
			}
		},
		onLoad(option) {
			uni.setNavigationBarColor({
				backgroundColor: '#0994f7',
				frontColor: '#ffffff'
			})
			if (option.inviteCode) {
				this.regform.fromcode = option.inviteCode
			}
		},
		methods: {
			changeBox(e) {
				this.isAgrement = e
			},
			toLogin() {
				if (!this.isAgrement) {
					uni.showToast({
						title: '请阅读并勾选协议',
						icon:'error'
					})
					return
				}
				login(this.regform).then(res => {
					this.$store.dispatch('user/userLogin', res.data)
					this.$store.dispatch('socket/openSocket')
					uni.switchTab({ url: '/pages/index/index' })
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.loginimg image{
		width: 100%;
	}
	.login-box {
		.login-content {
			margin: -100upx 40upx 0 40upx;
			position: relative;
			z-index: 1;
			padding: 40upx;
			border-radius: 30upx;
			background-color: #fff;
		}

		.login-check {
			display: flex;
			flex-direction: row;
			font-size: 26upx;
			margin-top: 10upx;
			.check-box {
				.info {
					color: #909399;
				}

				.privacy {
					color: #3c9cff;
				}
			}
		}
	}
</style>